<template>
  <div class="menu-container">
    <template v-for="(menuItem, index) in menu">
      <el-submenu
        :unique-opened="false"
        :key="index"
        v-if="menuItem.moduleChildren && menuItem.moduleChildren.length > 0"
        :index="menuItem.mdlUrl || menuItem.mdlName"
      >
        <!-- 一级菜单 -->
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{ $t(menuItem.mdlName) }}</span>
        </template>
        <v-submenu :menu="menuItem.moduleChildren"></v-submenu>
      </el-submenu>
      <!-- <router-link v-else :key="index" :to="(number == 20) ? ('/layout/homePage/group') : ('/layout' + menuItem.mdlUrl)"> -->
      <router-link v-else :key="index" :to="'/layout' + menuItem.mdlUrl">
        <el-menu-item @click="handleSelect(menuItem)" :index="menuItem.mdlUrl">
          <span slot="title">{{ $t(menuItem.mdlName) }}</span>
        </el-menu-item>
      </router-link>
    </template>
  </div>
</template>

<script>
// 递归组件 无限级菜单
export default {
  name: 'v-submenu',
  props: ['menu'],
  data() {
    return {
      number: 1,
    }
  },
  methods: {
    handleSelect(menuItem) {
      // console.log(menuItem,111)
      console.log(menuItem)
      this.$store.commit('user/SET_NAV_BUTTON', menuItem)
    },
  },
  //标签超过20 提示信息
  // computed: {
  //   visitedTags() {
  //     return this.$store.state.tagViews.visitedTags
  //   },
  // },
  // watch:{
  //   visitedTags() {
  //     console.log(this.visitedTags.length)
  //     this.number = this.visitedTags.length
  //   }
  // }
}
</script>
